<template>
  <div class="support-announcement">
    <el-card class="header-card">
      <template #header>
        <div class="card-header">
          <span>公告管理</span>
        </div>
      </template>
      <div class="content">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="公告发布" name="announcementPublish">
            <div class="announcement-publish-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>发布公告</span>
                  </div>
                </template>
                
                <el-form :model="announcementForm" label-width="120px">
                  <el-form-item label="公告标题" required>
                    <el-input v-model="announcementForm.title" placeholder="请输入公告标题" />
                  </el-form-item>
                  
                  <el-form-item label="公告类型" required>
                    <el-select v-model="announcementForm.type" placeholder="请选择公告类型">
                      <el-option label="系统公告" value="system" />
                      <el-option label="维护通知" value="maintenance" />
                      <el-option label="功能更新" value="feature" />
                      <el-option label="其他" value="other" />
                    </el-select>
                  </el-form-item>
                  
                  <el-form-item label="生效时间" required>
                    <el-date-picker
                      v-model="announcementForm.effectiveTime"
                      type="datetime"
                      placeholder="选择生效时间"
                      format="YYYY-MM-DD HH:mm:ss"
                    />
                  </el-form-item>
                  
                  <el-form-item label="过期时间">
                    <el-date-picker
                      v-model="announcementForm.expireTime"
                      type="datetime"
                      placeholder="选择过期时间"
                      format="YYYY-MM-DD HH:mm:ss"
                    />
                  </el-form-item>
                  
                  <el-form-item label="公告内容" required>
                    <el-input
                      v-model="announcementForm.content"
                      type="textarea"
                      :rows="6"
                      placeholder="请输入公告内容"
                    />
                  </el-form-item>
                  
                  <el-form-item label="推送渠道">
                    <el-checkbox-group v-model="announcementForm.channels">
                      <el-checkbox label="站内信">站内信</el-checkbox>
                      <el-checkbox label="邮件">邮件</el-checkbox>
                      <el-checkbox label="短信">短信</el-checkbox>
                      <el-checkbox label="APP推送">APP推送</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                  
                  <el-form-item label="优先级">
                    <el-rate
                      v-model="announcementForm.priority"
                      :max="3"
                      :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                    />
                  </el-form-item>
                  
                  <el-form-item>
                    <el-button type="primary" @click="publishAnnouncement">发布</el-button>
                    <el-button @click="saveDraft">保存草稿</el-button>
                    <el-button @click="resetForm">重置</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="公告历史" name="announcementHistory">
            <div class="announcement-history-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>公告历史</span>
                    <div class="header-actions">
                      <el-date-picker
                        v-model="historyDateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="YYYY-MM-DD"
                        @change="loadAnnouncementHistory"
                      />
                      <el-select v-model="historyType" placeholder="公告类型" @change="loadAnnouncementHistory">
                        <el-option label="全部" value="" />
                        <el-option label="系统公告" value="system" />
                        <el-option label="维护通知" value="maintenance" />
                        <el-option label="功能更新" value="feature" />
                        <el-option label="其他" value="other" />
                      </el-select>
                      <el-button @click="exportHistory">导出</el-button>
                    </div>
                  </div>
                </template>
                
                <el-table :data="announcementHistory" style="width: 100%">
                  <el-table-column prop="title" label="公告标题" />
                  <el-table-column prop="type" label="类型" width="100" />
                  <el-table-column prop="publishTime" label="发布时间" width="180" />
                  <el-table-column prop="expireTime" label="过期时间" width="180" />
                  <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                      <el-tag :type="getAnnouncementStatusType(scope.row.status)">
                        {{ scope.row.status }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="views" label="浏览量" width="80" />
                  <el-table-column label="操作" width="200">
                    <template #default="scope">
                      <el-button size="small" @click="viewAnnouncement(scope.row)">查看</el-button>
                      <el-button 
                        v-if="scope.row.status === '已发布'"
                        size="small" 
                        type="warning" 
                        @click="editAnnouncement(scope.row)"
                      >
                        编辑
                      </el-button>
                      <el-button 
                        v-if="scope.row.status !== '已过期'"
                        size="small" 
                        type="danger" 
                        @click="deleteAnnouncement(scope.row)"
                      >
                        删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                
                <div class="pagination-container">
                  <el-pagination
                    v-model:current-page="historyCurrentPage"
                    v-model:page-size="historyPageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="historyTotal"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleHistorySizeChange"
                    @current-change="handleHistoryCurrentChange"
                  />
                </div>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="通知模板" name="notificationTemplate">
            <div class="notification-template-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>通知模板管理</span>
                    <div class="header-actions">
                      <el-button type="primary" @click="createTemplate">新建模板</el-button>
                    </div>
                  </div>
                </template>
                
                <el-table :data="notificationTemplates" style="width: 100%">
                  <el-table-column prop="name" label="模板名称" />
                  <el-table-column prop="type" label="模板类型" width="120" />
                  <el-table-column prop="channel" label="通知渠道" width="120" />
                  <el-table-column prop="createTime" label="创建时间" width="180" />
                  <el-table-column prop="updateTime" label="更新时间" width="180" />
                  <el-table-column label="操作" width="200">
                    <template #default="scope">
                      <el-button size="small" @click="editTemplate(scope.row)">编辑</el-button>
                      <el-button size="small" @click="viewTemplate(scope.row)">预览</el-button>
                      <el-button size="small" type="danger" @click="deleteTemplate(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                
                <div class="pagination-container">
                  <el-pagination
                    v-model:current-page="templateCurrentPage"
                    v-model:page-size="templatePageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="templateTotal"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleTemplateSizeChange"
                    @current-change="handleTemplateCurrentChange"
                  />
                </div>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="推送管理" name="pushManagement">
            <div class="push-management-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>推送任务管理</span>
                    <div class="header-actions">
                      <el-date-picker
                        v-model="pushDateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="YYYY-MM-DD"
                        @change="loadPushTasks"
                      />
                      <el-button @click="exportPushTasks">导出</el-button>
                    </div>
                  </div>
                </template>
                
                <el-table :data="pushTasks" style="width: 100%">
                  <el-table-column prop="title" label="推送标题" />
                  <el-table-column prop="channel" label="推送渠道" width="120" />
                  <el-table-column prop="scheduleTime" label="计划时间" width="180" />
                  <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                      <el-tag :type="getPushStatusType(scope.row.status)">
                        {{ scope.row.status }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="successCount" label="成功数" width="80" />
                  <el-table-column prop="failCount" label="失败数" width="80" />
                  <el-table-column label="操作" width="200">
                    <template #default="scope">
                      <el-button size="small" @click="viewPushTask(scope.row)">详情</el-button>
                      <el-button 
                        v-if="scope.row.status === '待执行'"
                        size="small" 
                        type="warning" 
                        @click="editPushTask(scope.row)"
                      >
                        编辑
                      </el-button>
                      <el-button 
                        v-if="scope.row.status === '待执行'"
                        size="small" 
                        type="danger" 
                        @click="cancelPushTask(scope.row)"
                      >
                        取消
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                
                <div class="pagination-container">
                  <el-pagination
                    v-model:current-page="pushCurrentPage"
                    v-model:page-size="pushPageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="pushTotal"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handlePushSizeChange"
                    @current-change="handlePushCurrentChange"
                  />
                </div>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 响应式数据
const activeTab = ref('announcementPublish')
const historyDateRange = ref([])
const historyType = ref('')
const pushDateRange = ref([])

// 分页数据
const historyCurrentPage = ref(1)
const historyPageSize = ref(20)
const historyTotal = ref(100)
const templateCurrentPage = ref(1)
const templatePageSize = ref(20)
const templateTotal = ref(25)
const pushCurrentPage = ref(1)
const pushPageSize = ref(20)
const pushTotal = ref(40)

// 公告表单
const announcementForm = reactive({
  title: '',
  type: '',
  effectiveTime: '',
  expireTime: '',
  content: '',
  channels: ['站内信'],
  priority: 1
})

// 公告历史数据
const announcementHistory = ref([
  {
    id: 1,
    title: '系统维护通知',
    type: '维护通知',
    publishTime: '2023-06-15 14:30:22',
    expireTime: '2023-06-16 14:30:22',
    status: '已发布',
    views: 1247
  },
  {
    id: 2,
    title: '新功能上线',
    type: '功能更新',
    publishTime: '2023-06-10 09:15:33',
    expireTime: '2023-07-10 09:15:33',
    status: '已发布',
    views: 892
  }
])

// 通知模板数据
const notificationTemplates = ref([
  {
    id: 1,
    name: '系统维护通知模板',
    type: '系统公告',
    channel: '站内信',
    createTime: '2023-06-01 10:00:00',
    updateTime: '2023-06-01 10:00:00'
  },
  {
    id: 2,
    name: '新功能上线通知模板',
    type: '功能更新',
    channel: '邮件',
    createTime: '2023-06-05 14:20:05',
    updateTime: '2023-06-05 14:20:05'
  }
])

// 推送任务数据
const pushTasks = ref([
  {
    id: 1,
    title: '系统维护通知推送',
    channel: '站内信',
    scheduleTime: '2023-06-15 14:30:22',
    status: '已完成',
    successCount: 1247,
    failCount: 3
  },
  {
    id: 2,
    title: '新功能上线推送',
    channel: '邮件',
    scheduleTime: '2023-06-20 09:00:00',
    status: '待执行',
    successCount: 0,
    failCount: 0
  }
])

// 方法
const publishAnnouncement = () => {
  if (!announcementForm.title || !announcementForm.type || !announcementForm.effectiveTime || !announcementForm.content) {
    ElMessage.warning('请填写必填项')
    return
  }
  
  ElMessage.success('公告发布成功')
  // 重置表单
  resetForm()
  
  // 添加到历史记录
  announcementHistory.value.unshift({
    id: announcementHistory.value.length + 1,
    title: announcementForm.title,
    type: announcementForm.type,
    publishTime: new Date().toLocaleString(),
    expireTime: announcementForm.expireTime,
    status: '已发布',
    views: 0
  })
}

const saveDraft = () => {
  ElMessage.info('公告已保存为草稿')
}

const resetForm = () => {
  announcementForm.title = ''
  announcementForm.type = ''
  announcementForm.effectiveTime = ''
  announcementForm.expireTime = ''
  announcementForm.content = ''
  announcementForm.channels = ['站内信']
  announcementForm.priority = 1
}

const loadAnnouncementHistory = () => {
  ElMessage.info('加载公告历史')
}

const exportHistory = () => {
  ElMessage.success('公告历史导出成功')
}

const viewAnnouncement = (row: any) => {
  ElMessage.info(`查看公告: ${row.title}`)
}

const editAnnouncement = (row: any) => {
  ElMessage.info(`编辑公告: ${row.title}`)
}

const deleteAnnouncement = (row: any) => {
  ElMessageBox.confirm(
    `确定要删除公告 "${row.title}" 吗？`,
    '删除公告确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('公告删除成功')
    // 从列表中移除
    const index = announcementHistory.value.indexOf(row)
    if (index > -1) {
      announcementHistory.value.splice(index, 1)
    }
  })
}

const handleHistorySizeChange = (val: number) => {
  historyPageSize.value = val
  loadAnnouncementHistory()
}

const handleHistoryCurrentChange = (val: number) => {
  historyCurrentPage.value = val
  loadAnnouncementHistory()
}

const createTemplate = () => {
  ElMessage.info('创建新模板')
}

const editTemplate = (row: any) => {
  ElMessage.info(`编辑模板: ${row.name}`)
}

const viewTemplate = (row: any) => {
  ElMessage.info(`预览模板: ${row.name}`)
}

const deleteTemplate = (row: any) => {
  ElMessageBox.confirm(
    `确定要删除模板 "${row.name}" 吗？`,
    '删除模板确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('模板删除成功')
    // 从列表中移除
    const index = notificationTemplates.value.indexOf(row)
    if (index > -1) {
      notificationTemplates.value.splice(index, 1)
    }
  })
}

const handleTemplateSizeChange = (val: number) => {
  templatePageSize.value = val
}

const handleTemplateCurrentChange = (val: number) => {
  templateCurrentPage.value = val
}

const loadPushTasks = () => {
  ElMessage.info('加载推送任务')
}

const exportPushTasks = () => {
  ElMessage.success('推送任务导出成功')
}

const viewPushTask = (row: any) => {
  ElMessage.info(`查看推送任务: ${row.title}`)
}

const editPushTask = (row: any) => {
  ElMessage.info(`编辑推送任务: ${row.title}`)
}

const cancelPushTask = (row: any) => {
  ElMessageBox.confirm(
    `确定要取消推送任务 "${row.title}" 吗？`,
    '取消推送确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('推送任务已取消')
    row.status = '已取消'
  })
}

const handlePushSizeChange = (val: number) => {
  pushPageSize.value = val
  loadPushTasks()
}

const handlePushCurrentChange = (val: number) => {
  pushCurrentPage.value = val
  loadPushTasks()
}

// 工具方法
const getAnnouncementStatusType = (status: string) => {
  switch (status) {
    case '已发布': return 'success'
    case '草稿': return 'info'
    case '已过期': return 'warning'
    default: return 'info'
  }
}

const getPushStatusType = (status: string) => {
  switch (status) {
    case '已完成': return 'success'
    case '待执行': return 'warning'
    case '已取消': return 'info'
    case '执行中': return 'primary'
    default: return 'info'
  }
}
</script>

<style scoped>
.support-announcement {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.content {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.stat-card {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}
</style>